<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
<h1>
    AJAX
</h1>
<fieldset>
    <legend>Ajax请求</legend>
    <button onclick="doAjaxGet()">发送Get请求</button>
    <span>1111111111</span>
</fieldset>
</body>
<script>

    function doAjaxGet(){
        var xhr = new XMLHttpRequest();
        //事件监听函数
        xhr.onreadystatechange = function () {

            /**
             * 0 还未执行open方法
             * 1 已执行open方法 未执行send方法
             * 2 已执行send方法
             * 3 客户端正在接收相应的数据
             * 4 客户端完成相应数据的接收
             *
             * 200 服务店的处理过程是OK的
             *
             */

            if(xhr.readyState === 4 && xhr.status === 200){
                document.getElementsByTagName("span")[0].innerHTML = xhr.responseText;
            }

        };
        xhr.open("GET","http://localhost:8081/ajaxGet",true);
        xhr.send(null);
   }
</script>
</html>